<template>
  <div>
    <div class="background-img-css" :style="{ backgroundImage:'url(' + frameImg + ')' }" @click="displayWordsOrGrammars()"
         ref="pptBackground" id="pptBackground">
      <display-current-item current-item-type="word" :current-display-item="currentDisplayWord"
                            :time-to-move-aside="isTimeToMoveAside"></display-current-item>
      <display-current-item current-item-type="grammar" :current-display-item="currentDisplayGrammar"
                            :time-to-move-aside="isTimeToMoveAside"></display-current-item>
      <subtitle :subtitle-img="this.subtitleImg" :subtitle-music="this.subtitleMusic"></subtitle>
      <knowledge-item-stack item-type="word" :item-stack="wordStack" :move-down-time="wordStackMoveDown"
                            v-if="wordStack.length > 0"></knowledge-item-stack>
      <knowledge-item-stack item-type="grammar" :item-stack="grammarStack" :move-down-time="grammarStackMoveDown"
                            v-if="grammarStack.length > 0"></knowledge-item-stack>
    </div>
    <el-button
      v-if="showEndButton"
      @click="goToHomePage"
      style="
        z-index: 100;
        position: absolute;
        top: 1233px;
        right: 366px;
      "
      type="primary" icon="el-icon-caret-right"
    >
      结束
    </el-button>
  </div>
</template>

<script>
import KnowledgeItemStack from "@/components/KnowledgeItemStack";
import DisplayCurrentItem from "../components/DisplayCurrentItem";
import Subtitle from "../components/Subtitle";
import {handleCurrentPageEnterEvent} from "@/utils/keyBoardUtil";
import {getKnowledgeVo} from "@/apis/sentence.api";

export default {
  name: 'pptPage',
  props: {
    chapterNumStr: String,
    videoNumStr: String,
    pageNumStr: String
  },
  components: {
    DisplayCurrentItem,
    KnowledgeItemStack,
    Subtitle
  },
  data() {
    return {
      frameImg: null,
      subtitleImg: null,
      subtitleMusic: null,
      isNewPage: true,
      wordStack: this.$store.getters.stacks.words,
      grammarStack: this.$store.getters.stacks.grammars,
      todoWords: [],
      todoGrammars: [],
      currentDisplayWord: null,
      currentDisplayGrammar: null,
      isTimeToMoveAside: false,
      wordStackMoveDown: 0,
      grammarStackMoveDown: 0,
      currentVideoTotalSentence: 4,
      displayOrder: [],
      showEndButton: false
    }
  },
  computed: {
    chapterNum() {
      return parseInt(this.chapterNumStr);
    },
    videoNum() {
      return parseInt(this.videoNumStr);
    },
    pageNum() {
      return parseInt(this.pageNumStr);
    },
    stackWords() {
      return this.$store.getters.stacks.words;
    },
    stackGrammars() {
      return this.$store.getters.stacks.grammars;
    }
  },
  mounted() {
    this.renderPPTData(this.videoNum, this.pageNum);
    handleCurrentPageEnterEvent(this.$route, 'pptPage', this.displayWordsOrGrammars);
  },
  methods: {
    renderPPTData(videoNum, pageNum) {
      this.frameImg = require(`@/assets/pictures/frames/${videoNum}/${pageNum}.jpg`);
      this.subtitleImg = require(`@/assets/pictures/subtitles/${videoNum}/${pageNum}.png`);
      this.subtitleMusic = require(`@/assets/audios/${videoNum}/${pageNum}.mp3`);
      this.isNewPage = true;
    },
    getTodoItems(data) {
      let todoItems = [];
      for (let i = 0; i < data.length; i++) {
        let todoItem = {
          content: data[i].content
        };
        todoItems.push(todoItem);
      }
      return todoItems;
    },
    async calTodoItems(pageNum) {
      let res = await getKnowledgeVo({
        chapterNum: this.chapterNum,
        videoNum: this.videoNum,
        sentenceSeq: pageNum,
        displayedTop10Words: this.stackWords.slice(0, 10).map(item => item.content),
        displayedTop10Grammars: this.stackGrammars.slice(0, 10).map(item => item.content)
      });
      this.todoWords = this.getTodoItems(res.data.words);
      this.todoGrammars = this.getTodoItems(res.data.grammars);
      this.displayOrder = res.data.displayOrder
    },
    changeNextFrame() {
      this.$bus.$emit('goToNextPage', this.pageNum + 1);
    },
    async initTodoWordsOrGrammars() {
      await this.calTodoItems(this.pageNum);
      this.isNewPage = false;
    },
    getAndShowCurrentDisplayItem(currentItemType) {
      let todoItems = currentItemType === 'word' ? this.todoWords : this.todoGrammars;
      if (currentItemType === 'word') {
        this.currentDisplayWord = todoItems[0];
      } else {
        this.currentDisplayGrammar = todoItems[0];
      }
      todoItems.shift();
    },
    moveCurrentDisplayItemToAside() {
      this.isTimeToMoveAside = true;
    },
    moveHistStack(currentItemType) {
      if (currentItemType === 'word') {
        if (this.wordStack.length > 0) {
          this.wordStackMoveDown++;
        }
      } else {
        if (this.grammarStack.length > 0) {
          this.grammarStackMoveDown++;
        }
      }
    },
    putCurrentItemToStack(currentItemType) {
      if (currentItemType === 'word') {
        this.$store.commit("updateStacks", {word: this.currentDisplayWord});
        this.currentDisplayWord = null;
      } else {
        this.$store.commit("updateStacks", {grammar: this.currentDisplayGrammar});
        this.currentDisplayGrammar = null;
      }
      this.isTimeToMoveAside = false;
    },
    recoverStackPosition(currentItemType) {
      if (currentItemType === 'word') {
        this.wordStackMoveDown = 0;
      } else {
        this.grammarStackMoveDown = 0;
      }
    },
    putCurrentItemToStackAfter1s(currentItemType) {
      setTimeout(() => {
        this.putCurrentItemToStack(currentItemType);
        this.recoverStackPosition(currentItemType);
      }, 1000);
    },
    timeToShowItem(currentItemType) {
      return currentItemType === 'word' ?
        this.todoWords.length > 0 && this.currentDisplayWord == null :
        this.todoGrammars.length > 0 && this.currentDisplayGrammar == null;
    },
    timeToMoveAside(currentItemType) {
      return currentItemType === 'word' ? this.currentDisplayWord != null : this.currentDisplayGrammar != null;
    },
    timeToGoToNextPage() {
      return this.todoGrammars.length === 0 && this.todoWords.length === 0;
    },
    async displayWordsOrGrammars() {
      if (this.isNewPage) {
        await this.initTodoWordsOrGrammars();
      }
      if (this.displayOrder.length > 0) {
        if (this.timeToShowItem(this.displayOrder[0])) {
          this.getAndShowCurrentDisplayItem(this.displayOrder[0]);
          return;
        }
        if (this.timeToMoveAside(this.displayOrder[0])) {
          this.moveCurrentDisplayItemToAside();
          this.moveHistStack(this.displayOrder[0]);
          this.putCurrentItemToStackAfter1s(this.displayOrder[0]);
          this.displayOrder.shift();
        }
      }
      if (this.timeToGoToNextPage()) {
        this.changeNextFrame();
      }
    },
    goToHomePage() {
      this.$router.push({path: `/videoHomePage/${this.chapterNum}/${this.videoNum}/false`});
    }
  },
  watch: {
    pageNum() {
      if (this.pageNum === this.currentVideoTotalSentence + 1) {
        this.showEndButton = true;
        return;
      }
      this.renderPPTData(this.videoNum, this.pageNum);
    },
    '$store.getters.stacks.words': {
      handler() {
        this.wordStack = this.$store.getters.stacks.words;
      },
      deep: true
    },
    '$store.getters.stacks.grammars': {
      handler() {
        this.grammarStack = this.$store.getters.stacks.grammars;
      },
      deep: true
    }
  }
}
</script>

<style lang="scss" scoped>
@import "src/assets/scss/img";
@import "src/assets/scss/layout";
@import "src/assets/scss/div";
@import "src/assets/scss/animate";
@import "src/assets/scss/color";

.knowledge-div {
  @include position-abs-bottom(25%);
  width: $knowledge-div-width;
  height: $knowledge-div-height;
  user-select: none;
}
</style>